<template>
  <div class="nav">
    <div class="items">
      <router-link to="/home" class="item">
        首页
        <span class="span"></span>
      </router-link>
      <router-link
        :to="'/subject/'+item.link"
        class="item"
        v-for="item in courseList"
        :key="item.name"
      >
        {{item.name}}
        <span class="span"></span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      courseList: [
        {
          name: "语文",
          link: "yuwen"
        },
        {
          name: "数学",
          link: "shuxue"
        },
        {
          name: "英语",
          link: "yingyu"
        },
        {
          name: "日语",
          link: "riyu"
        },
        {
          name: "俄语",
          link: "eyu"
        },
        {
          name: "物理",
          link: "wuli"
        },
        {
          name: "化学",
          link: "huaxue"
        },
        {
          name: "生物",
          link: "shengwu"
        },
        {
          name: "政治",
          link: "zhengzhi"
        },
        {
          name: "历史",
          link: "lishi"
        },
        {
          name: "地理",
          link: "dili"
        },
        {
          name: "综合",
          link: "zonghe"
        },
        {
          name: "其他",
          link: "author"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/common.scss";
@media screen and (min-width: 1200px) {
  .nav {
    box-sizing: border-box;
    overflow: hidden;
    height: 100%;
    width: 100%;
    padding: 0 0 10px 0;
    margin: 10px 0;
    transition: all 1s;
    .items {
      height: 100%;
      width: 70%;
      margin: 0.1rem auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .item {
        cursor: pointer;
        position: relative;
        text-decoration: none;
        margin: 0 10px;
        font-size: 16px;
        min-width: 20px;
        height: 45px;
        width: 40px;
        line-height: 35px;
        text-align: center;
        color: $fontColor;
        transition: border 0.2s;
        box-sizing: border-box;
        .span {
          opacity: 0;
          position: absolute;
          display: block;
          left: 50%;
          margin-left: -15px;
          width: 30px;
          height: 8px;
          border-radius: 5px;
          background-color: #8ac641;
          transition: all 0.2s;
        }
        &.router-link-active {
          .span {
            opacity: 1;
          }
        }
        &:hover {
          .span {
            opacity: 1;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 576px) {
  .nav {
    box-sizing: border-box;
    overflow-y: hidden;
    overflow-x: visible;
    height: 100%;
    width: 100%;
    transition: all 1s;
    .items {
      height: 100%;
      width: calc(50 * 14px);
      white-space: nowrap;
      margin-top: 5px;
      .item {
        height: 100%;
        line-height: 25px;
        float: left;
        cursor: pointer;
        position: relative;
        text-decoration: none;
        font-size: 13px;
        text-align: center;
        width: 45px;
        color: $fontColor;
        box-sizing: border-box;
        .span {
          opacity: 0;
          position: absolute;
          display: block;
          left: 50%;
          margin-left: -15px;
          width: 30px;
          height: 6px;
          border-radius: 5px;
          background-color: #8ac641;
          transition: all 0.2s;
        }
        &.router-link-active {
          .span {
            opacity: 1;
          }
        }
        &:hover {
          .span {
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>
